<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 公告管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div style="padding-bottom: 10px">
        <el-form :inline="true" :model="query" class="demo-form-inline">
          <el-form-item label="地点名">
            <el-input
                v-model="query.name"
                placeholder="地点"
                class="handle-input mr10"
            ></el-input>
          </el-form-item>
          <el-form-item label="添加日期">
            <div class="block">
              <el-date-picker
                  v-model="query.createTime"
                  type="date"
                  placeholder="选择一个日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
            >搜索
            </el-button
            >
            <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="handleSchoolAdd"
            >新增
            </el-button
            >
          </el-form-item>
        </el-form>

      </div>
      <div>
        <div class="clits">
          <div><i class="el-icon-s-data"></i>校园风光</div>
        </div>
        <el-table
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
          <!--                <el-table-column-->
          <!--                    :show-overflow-tooltip="true"-->
          <!--                    :prop="item.prop"-->
          <!--                    :label="item.label"-->
          <!--                    v-for="item in props"-->
          <!--                    :key="item.prop"-->
          <!--                >-->
          <!--                </el-table-column>-->
          <el-table-column label="地点" prop="title" align="center"></el-table-column>
          <el-table-column label="作者" prop="author" align="center"></el-table-column>
          <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
          <el-table-column label="风光样例" align="center">
            <template #default="scope">
              <p v-if="scope.row.content!=null">
                       <span v-for="(item,index) in scope.row.content.split(',')" :key="index">
                     <el-image style="display: inline-flex;padding: 10px;width: 30%;height: 10%"
                               class="table-td-thumb"
                               :src="item"
                               :preview-src-list="[item]"
                     ></el-image>
        </span>
              </p>

            </template>
          </el-table-column>
          <el-table-column>
            <el-table-column
                label="操作"
                width="180"
                align="center"
                fixed="right"
            >
              <template #default="scope">
                <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="handleEditSchool(scope.row.sid)"
                >编辑
                </el-button>
                <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="red"
                    @click="handleDelete(scope.$index, scope.row.sid)"
                >删除
                </el-button
                >
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
              :currentPage="query.pageNum"
              :page-sizes="[10, 20, 40]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
          >
          </el-pagination>
        </div>
      </div>

      <div>
        <!-- 校园分风光 -->
        <el-dialog
            title="校园风光"
            v-model="importVisible"
            width="40%"
            :before-close="handleClose">

          <div class="container">
            <div class="form-box">
              <el-form ref="formRef" :rules="rules" :model="fileForm" label-width="80px">
                <el-form-item label="类型" prop="goodsName">
                  <el-input v-model="fileForm.typeName" aria-required="true" disabled style="color: #2d8cf0"></el-input>
                </el-form-item>
                <!--             :file-list="fileList"-->
                <el-form-item label="校园图片">
                  <el-upload ref="pictureUpload" action="#" list-type="picture-card"
                             :limit="10" :on-exceed="handleExceed"
                             :auto-upload="false"
                             :file-list="fileList"

                             :on-change="handleFile">
                    <template #default>
                      <i class="el-icon-plus"></i>

                    </template>
                    <template #file="{ file }">
                      <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                        <span class="el-upload-list__item-actions">
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
                      </div>
                    </template>
                  </el-upload>

                </el-form-item>
                <el-form-item label="标题名" prop="title">
                  <el-input v-model="fileForm.title" placeholder="标题名" aria-required="true">></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">提交</el-button>
                  <!--            <el-button @click="onReset">重置</el-button>-->
                </el-form-item>
              </el-form>

            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>

</template>

<!--<script setup>-->
<script>

import request from "@/utils/request";
import E from "wangeditor";
import {ref, nextTick, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "../../router";

export default {
  name: "SchoolCampus",
  // methods: {
  //   //文件上传
  //   submitUpload() {
  //     this.$refs.upload.submit();
  //   },
  //   //文件数量控制
  //   handleExceed(files, fileList) {
  //     console.log(fileList)
  //     this.$message.warning(
  //         `The limit is 1, you selected ${
  //             files.length
  //         } files this time, add up to ${files.length + fileList.length} totally`
  //     );
  //   },
  //   //文件移除
  //   handleRemove(file) {
  //     let uploadFiles = this.$refs.pictureUpload.uploadFiles
  //     for (var i = 0; i < uploadFiles.length; i++) {
  //       if (uploadFiles[i]['url'] == file.url) {
  //         uploadFiles.splice(i, 1)
  //         this.fileList.splice(i, 1)
  //         console.log(this.fileList)
  //       }
  //     }
  //   },
  // },
  setup() {
    const tableData = ref([])
    // const dialogVisible = ref(false)
    const query = reactive({
      name: "",
      createTime: "",
      pageNum: 1,
      pageSize: 10,
    });
    const pageTotal = ref(0);
    const getData = () => {
      request
          .get("/article/queryListSchool", {
            params: query,
          })
          .then((res) => {
            tableData.value = res.data.records;
            pageTotal.value = res.data.total;
          });
    }
    getData()
// 查询操作
    const handleSearch = () => {
      query.pageNum = 1;
      getData();
    };
// 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
// 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };
    // const entity = ref({
    //   author: "",
    //   cid: "",
    //   content: "",
    //   releaseType: "",
    //   title: "",
    // })
    // const content = ref("")

    // const vis = ref(false)
    // let editor

    // const query = reactive({
    //   name: "",
    //   cid: "",
    //   pageNum: 1,
    //   pageSize: 10,
    // });
    // const look = (c) => {
    //   content.value = c
    //   vis.value = true
    // }
    // const load = () => {
    //   request
    //       .get("/article/page", {
    //         params: query,
    //       }).then(res => {
    //     tableData.value = res.data.records
    //     total.value = res.data.total
    //   })
    // }
    //下拉框
    // const options = ref([]);
    // const cateList = ref([]);
    // const getCate = () => {
    //   request.get("/cate").then((res) => {
    //     cateList.value = res.data;
    //   });
    // };
    // getCate()
    // const handleAdd = () => {
    //   dialogVisible.value = true
    //   entity.value = {}
    //
    //   nextTick(() => {
    //     // 关联弹窗里面的div，new一个 editor对象
    //     if (!editor) {
    //       editor = new E('#div1')
    //
    //       // 配置 server 接口地址
    //       editor.config.uploadImgServer = 'http://localhost:9998/files/editor/upload'
    //       editor.config.uploadFileName = "file"  // 设置上传参数名称
    //       editor.create()
    //     }
    //
    //     editor.txt.html("")
    //
    //   })
    // }
    // const handleEdit = (row) => {
    //   entity.value = JSON.parse(JSON.stringify(row))
    //   dialogVisible.value = true
    //
    //   nextTick(() => {
    //     // 关联弹窗里面的div，new一个 editor对象
    //     // 关联弹窗里面的div，new一个 editor对象
    //     if (!editor) {
    //       editor = new E('#div1')
    //       // 配置 server 接口地址
    //       editor.config.uploadImgServer = 'http://localhost:9998/files/editor/upload'
    //       editor.config.uploadFileName = "file"  // 设置上传参数名称
    //       editor.create()
    //     }
    //
    //     editor.txt.html(row.content)
    //   })
    // }
    // const del = (sid) => {
    //   request.delete("/article/" + sid).then(res => {
    //     if (res.code === '0') {
    //       ElMessage.success("删除成功")
    //     } else {
    //       ElMessage.error(res.msg)
    //     }
    //     load()  // 删除之后重新加载表格的数据
    //   })
    // }
    // const save = () => {
    //   entity.value.content = editor.txt.html()
    //
    //   // entity.value.cid = "1"
    //   if (entity.value.sid) {  // 更新
    //     request.put("/article", entity.value).then(res => {
    //       console.log(res)
    //       if (res.code === '0') {
    //         ElMessage.success("更新成功")
    //       } else {
    //         ElMessage.error(res.msg)
    //       }
    //       load() // 刷新表格的数据
    //       dialogVisible.value = false  // 关闭弹窗
    //     })
    //   } else {  // 新增
    //     request.post("/article", entity.value).then(res => {
    //       if (res.code === '0') {
    //         ElMessage.success("新增成功")
    //       } else {
    //         ElMessage.error(res.msg)
    //       }
    //
    //       load() // 刷新表格的数据
    //       dialogVisible.value = false  // 关闭弹窗
    //     })
    //   }
    // }
    // const handleSizeChange = (pageSize) => {   // 改变当前每页的个数触发
    //   query.pageSize = pageSize
    //   load()
    // }
    // const handleCurrentChange = (pageNum) => {  // 改变当前页码触发
    //   query.pageNum = pageNum
    //   load()
    // }
// 调用方法
//       load()
//       const props = [
//         {label: "地点名", prop: "title"},
//         // {label: "图片", prop: "content"},
//         {label: "上传者", prop: "author"},
//       ];
//       const tableDataCidFour = ref([])
//       const getListSchool = () => {
//         request.get("/article/queryListSchool").then((res) => {
//           tableDataCidFour.value = res.data
//         })
//       };
//       getListSchool();
//文件上传校园风光
    const handleSchoolAdd = () => {
      router.push("/admin/addSchoolpit");
      getData()
      // importVisible.value = true
    }
// 提交 // 删除操作
    const handleDelete = (index, sid) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
          .then(() => {
            request.delete("/article/" + sid).then((res) => {
              if (res.data) {
                ElMessage.success("删除成功");
                tableData.value.splice(index, 1);
                getData()
              } else {
                ElMessage.error("删除失败");
                getData()
              }
            });
          })
          .catch(() => {
          });
    };
    const handleEditSchool = (sid) => {
      router.push({path: "/admin/addSchoolpit", query: {id: sid}});
      getData()
    };

    return {
      tableData, pageTotal,
      query, handleSearch, handleSizeChange, handlePageChange, handleSchoolAdd, handleDelete, handleEditSchool,
      // name,
      // pageNum,
      // pageSize, props,
      // total,
      // entity, content, cateList,
      // vis, editor,
      // dialogVisible,
      // tableDataCidFour,
      // look,
      // handleEdit, handleCurrentChange, handleSizeChange,

      // handleAdd, del,
      // save,
      // load, getCate, getListSchool,

    }
  }
}

</script>

<style scoped>
.clits {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}

.clits div {
  text-align: left;
  color: white;
}

</style>
